<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-[#d9eee3] box">
    <!-- 顶部Logo -->
    <Header />
    <!-- 主卡片容器 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mx-auto w-95/100 mt-8">
      <div class="font-bold mb-4" style="font-size: 26px">
        <span>Hello! </span>
        <span>Let's get started on</span>
        <br />
        <span>completing your purchase.</span>
        <!-- <br>
            <span>
                purchase.
            </span> -->
      </div>
      <div class="mb-6">
        <span class="text-lg">Fill in your information below.</span>
      </div>

      <!-- 订单信息 -->
      <div class="mb-8">
        <!-- <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-medium">您的订单</h2>
            <button class="text-[#2D6E74]">编辑</button>
          </div> -->
        <div class="mb-6">
          <span class="text-lg font-bold mr-3">Your Order</span>
          <a :href="orderbackLink" class="text-[#477577] ">Edit</a>
        </div>
        <div
          class="flex items-center border border-[#477577] rounded-lg"
          style="padding: 2px"
        >
          <img
            :src="bottleImg"
            alt=""
            class="w-16 h-16 object-cover rounded"
          />
          <div v-if="haveProductNameList" class=" flex-1 pr-4 flex justify-between " style="align-items: center;">

            <el-select
             class="product_name"
              v-model="paymentInfo.productName"
              @change="getName"
              placeholder="Select Product"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in haveProductNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <p class="text-[#000000] font-bold mr-4">{{ productName == 'MyUTI Lab Test' ? '$198' : '$228' }}</p> -->
            <p class="text-[#000000] font-bold mr-4">{{paymentInfo.productPrice ? '$' + paymentInfo.productPrice : ''}}</p>
          </div>
          <div v-else class="ml-4 flex-1 pr-4 flex justify-between">
            <h3 class="font-medium">{{ productName }}</h3>
            <p class="text-[#000000] font-bold">{{paymentInfo.productPrice ? '$' + paymentInfo.productPrice : '' }}</p>
          </div>
   
        </div>
      </div>
      <!-- 个人信息表单 -->
      <div class="mb-8">
        <h2 class="text-xl mb-4 font-bold">Personal Information</h2>
        <div class="space-y-4">
          <div class="flex gap-[5px]">
            <el-input
            v-model="paymentInfo.firstName"
              type="text"
              placeholder="First Name"
              class="w-[50%]"
            />
            <el-input
   
              v-model="paymentInfo.lastName"
              type="text"
              placeholder="Last Name"
              class="w-[50%] "
            />
          </div>
          <div>
            <!-- <input
              v-model="paymentInfo.email"
              type="email"
              @input="valiteEmail"
              @blur="blurCheckEmail"
              placeholder="Email Address"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            /> -->
            <input
              v-model="paymentInfo.email"
              type="email"
              placeholder="Email Address"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div>
            <!-- <input
              v-model="paymentInfo.phone"
              type="email"
              placeholder="Email Address"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            /> -->
            <!-- <el-input type="phone" v-model="paymentInfo.phone" @input="getPhone" sonWidth="46" character="/"  /> -->
            <ChartInput type="phone" v-model:value="paymentInfo.phone" sonWidth="46" character="/"  />
          </div>
        </div>
      </div>

      <!-- 保险信息链接 -->
      <div class="flex items-start mb-8">
        <img class="w-[15px] h-[13px]" :src="star" alt="" />
        <div class="leading-none text-lg font-bold">
            <a href="javascript:;" class="ml-2 text-[#2D6E74] underline" @click="goPlan">
                View Insurance Plan Details 
            </a>
            <br>
            <span class="no-underline text-[#2D6E74] ml-2">(RECOMMENDED)</span>
        </div>
      </div>
      <!-- 提交按钮 -->
      <div class="flex justify-left mt-8 items-center">
        <a  class="mr-5 text-[#2D6E74] underline curson-point" @click="goBack">
            Back
        </a>
        <button
          @click="goNext"
          class="curson-point selfPay w-[184px] h-[60px]  bg-[#477577] text-white py-3 !rounded-button hover:bg-red-700 transition-colors duration-200 rounded-[30px]"
        >
          Next
        </button>
      </div>
    </div>
    <div class="mt-8 text-center">
      <img :src="bottomlog" alt="GOPATH Diagnostics" class="mx-auto w-30" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref,onMounted,watch } from "vue";
import { Check } from "@element-plus/icons-vue";
import log from "@/assets/img/red-uti-logo.png";
import bottomlog from "@/assets/img/green-uti-logo.png";
import bottleImg from "@/assets/img/uti-bottle.png";
import star from "@/assets/img/star.png";
import Header from "@/views/components/insurance-header.vue";
import { useRouter,useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUtiStore } from '@/store/tui'
import ChartInput from '@/views/components/chart-input.vue'
import { ElMessage } from 'element-plus'
import { getProductNameApi } from '@/api/index'


const store = useUtiStore()
const {productName, paymentInfo, orderbackLink} = storeToRefs(store)
const haveProductNameList = ref([])
const productNames = ref()
console.log('patient-store解构==>',productName,paymentInfo);
console.log('cerate');

const router = useRouter();
const route = useRoute();
const selectedOption = ref("insurance");
const emailStatus  = ref(null)
console.log('route', route);
const getName = (value)=>{
  console.log('value', value);
  if(value === 'MyUTI Lab Test') {
    paymentInfo.value.productName = 'MyUTI Lab Test'
    paymentInfo.value.shipping = 'FALSE'
    paymentInfo.value.productPrice = 198

  }else if(value === 'MyUTI Complete Home Test Kit'){
    paymentInfo.value.productName = 'MyUTI Complete Home Test Kit'
    paymentInfo.value.productPrice = 228
    paymentInfo.value.shipping = 'TRUE'
  }
}
const resetShippingData = ()=>{
  paymentInfo.value.shippingName = ''
  paymentInfo.value.shippingAddr1 = ''
  paymentInfo.value.shippingAddr2 = ''
  paymentInfo.value.shippingCity = ''
  paymentInfo.value.shippingState = ''
  paymentInfo.value.shippingCountry = ''
  paymentInfo.value.shippingZipCode = ''
  paymentInfo.value.chargeShipping = 'N'
  paymentInfo.value.useShippingAddr = 'N'
  paymentInfo.value.shippingCost = null
}
console.log('route', route);

watch( () => route.query, async (newParams) => {
  if(newParams && newParams.productPrice && newParams.Product_id){
    console.log('newParams', newParams);
    if(newParams.Product_id == 'MyUTI_lab_test' || newParams.Product_id == 'MyUTI_complete') {
      paymentInfo.value.productPrice = +newParams.productPrice
      paymentInfo.value.productId = newParams.Product_id as string
      paymentInfo.value.shipping = newParams.shipping as string
      paymentInfo.value.tax = newParams.tax as string
      if(paymentInfo.value.productId) {
        const res = await getProductNameApi(paymentInfo.value.productId)
        if(res.status === 200){
          paymentInfo.value.productName = res.data
        }else {
          paymentInfo.value.productName = ''
        }
      }
      if(newParams.shipping === 'FALSE'){
        resetShippingData()
      }
    }else {
      haveProductNameList.value = [
        {
          value: 'MyUTI Lab Test',label: 'MyUTI Lab Test'
        },
        {
          value: 'MyUTI Complete Home Test Kit',label: 'MyUTI Complete Home Test Kit'
        },
      ]
    }
    
  }else {
    haveProductNameList.value = [
      {
        value: 'MyUTI Lab Test',label: 'MyUTI Lab Test'
      },
      {
        value: 'MyUTI Complete Home Test Kit',label: 'MyUTI Complete Home Test Kit'
      },
    ]
  }
}, { immediate: true })
onMounted(async ()=>{
  console.log('onMounted');
  // const res = await getProductNameApi('MyUTI_complete')
  // console.log('res', res);
  if(route.query && route.query.productPrice && route.query.Product_id){
    console.log('route.query', route.query);
    if(route.query.Product_id == 'MyUTI_lab_test' || route.query.Product_id == 'MyUTI_complete') {
      paymentInfo.value.productPrice = +route.query.productPrice
      paymentInfo.value.productId = route.query.Product_id as string
      paymentInfo.value.shipping = route.query.shipping as string
      paymentInfo.value.tax = route.query.tax as string
      if(paymentInfo.value.productId) {
        const res = await getProductNameApi(paymentInfo.value.productId)
        if(res.status === 200){
          paymentInfo.value.productName = res.data
        }else {
          paymentInfo.value.productName = ''
        }
      }
      if(route.query.shipping === 'FALSE'){
        resetShippingData()
      }
    }else {
      haveProductNameList.value = [
        {
          value: 'MyUTI Lab Test',label: 'MyUTI Lab Test'
        },
        {
          value: 'MyUTI Complete Home Test Kit',label: 'MyUTI Complete Home Test Kit'
        },
      ]
    }
    
  }else {
    haveProductNameList.value = [
      {
        value: 'MyUTI Lab Test',label: 'MyUTI Lab Test'
      },
      {
        value: 'MyUTI Complete Home Test Kit',label: 'MyUTI Complete Home Test Kit'
      },
    ]
  }
})


const getPhone = (event)=>{
  console.log('event1', event);
  
}
const goPlan = () => {
    router.push({
        path: '/insuranceCompany'
    })
};
const goNext = () => {
  // console.log('paymentInfo', paymentInfo.value);
  
    if(!paymentInfo.value.firstName){
      return ElMessage.warning('First Name is required.')
    }
    if(!paymentInfo.value.lastName){
      return ElMessage.warning('Last Name is required.')
    }
    if(!paymentInfo.value.email){
      return ElMessage.warning('Email is required.')
    }
    if(!paymentInfo.value.phone){
      console.log('paymentInfo.value.phone', paymentInfo.value.phone);
      
      return ElMessage.warning('Phone is required.')
    }
    if(paymentInfo.value.phone.length < 10){
      console.log('paymentInfo.value.phone', paymentInfo.value.phone);
      
      return ElMessage.warning('Phone number is not long enough')
    }
    if(paymentInfo.value.email){
      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      // 检查邮箱格式是否匹配
      emailStatus.value = emailPattern.test(paymentInfo.value.email);
      if(!emailStatus.value) {
        return ElMessage.warning('Email format error')

      }
    }
    if(!paymentInfo.value.phone){
      return ElMessage.warning('Phone is required')
    }

    router.push({
        path: '/insuraneInfo'
    })
};

const goBack = ()=>{
  if(window.history.state.back){
    router.back()
  }
}
// const valiteEmail = (e)=>{
//      // 邮箱的正则表达式
//      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
//      // 检查邮箱格式是否匹配
//      emailStatus.value = emailPattern.test(e.target.value);
//      console.log('e', e);
//      console.log('emailStatus.value', emailStatus.value);
     
// }
const blurCheckEmail = (e)=>{
  if(!emailStatus.value){
    ElMessage.warning('Email format error')
  }
}
</script>
<style scoped lang="less">
@import "@/assets/css/base.css";
.box {
  font-family: Bicyclette;
  padding-bottom: 50px;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-600 {
  background-color: #4b5563 !important;
}
button:focus {
  outline: none;
}
input[type="radio"] {
  display: none;
}
.text-gray-600 {
  color: #6f6f6f;
}
.insurance,
.selfPay {
  line-height: 1.2;
  font-weight: 700;
  font-size: 14px;
}
:deep(.product_name .el-select__suffix) {
  display: none;
}
:deep(.el-select__wrapper.is-hovering:not(.is-focused) ) {
  box-shadow: none;
}
:deep(.product_name .el-select__wrapper) {
  border: none;
  padding-right: 0px;
}
</style>
      